import "./index.less"
import React, { useState } from 'react'
import { Drawer } from "@mui/material"
import { getSubjectsApi } from "@/api"

export default function Subjects() {

    const [show, setShow] = useState(false)
    const [subjects, setSubjects] = useState<ISubjects[]>([])

    const clickFn = () => {
        setShow(true)
        // 每次点击都发请求太浪费资源，我们可以把这种，在一定时间内不会变化的数据 使用 sessionStorage 缓存起来
        // 如果考虑到，数据确实可能会在 相对短的时间内变化，可以自己添加一个 时间戳，判断是否已经到时间，如果到了时间，就再重新获取
        // 如果有数据，直接从缓存里面取
        let storage = sessionStorage.getItem('subjects')
        if (storage) {
            setSubjects(JSON.parse(storage))
        } else {
            // 判断，如果没有数据，就发请求
            getSubjectsApi().then(res => {
                if (res.errCode === 0) {
                    setSubjects(res.data)
                    // 把数据缓存起来
                    sessionStorage.setItem('subjects', JSON.stringify(res.data))
                }
            })
        }
    }

    return (
        <div>
            <h2 onClick={clickFn}>Java学科</h2>
            <Drawer
                anchor="left"
                open={show}
                onClose={() => setShow(false)}
            >
                <ul>
                    {
                        subjects.map(item => <li key={item.id}>{item.title}</li>)
                    }
                </ul>
            </Drawer>
        </div>
    )
}
